<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>计算属性</h3>
        <h5>依赖缓存：
            当源数据无变化时，会将结果储存起来，
            方便下次使用，避免重复运算</h5>
        <p v-for="i in res">
            <span>姓名：{{i.name}}</span>
            <span>成绩：{{i.score}}</span>
        </p>
        <p>平均成绩：{{average}}</p>
        <p>平均成绩：{{ave()}}</p>
        <hr>
        <input type="text" v-model="age">
        <p>年龄为：{{age}}</p>
        <p>{{info}}</p>
        <hr>
        <input type="text" v-model="faceScore">
        <p>{{msg}}</p>
        <p v-show="ishot">上热搜了</p>
        <p v-show="isbao">知名男爱豆甜蜜秀恩爱</p>
        <P v-show="iswork">程序员吐了</P>
    </div>
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data:{
                res: [
                    {name: 'wang', score: 66},
                    {name: 'zhuo', score: 77},
                    {name: 'neng', score: 88},
                ],
                age: 0,
                info: '',
                //初颜值
                faceScore: 60,
                msg: '你好',
                ishot: false,
                isbao: false,
                iswork: false,
            },
            watch: {
                age: function(newv,oldv){
                    if(newv < 18){
                        this.info= '未成年人禁止观看'
                    }else if(newv == 18){
                        this.info= '大家都是成年人嘛'
                    }else{
                        this.info= '老流氓！'
                    }
                },
            
            //监听颜值的变化
                faceScore: function(newF,oldF){
                    if(newF<60){
                        this.msg = '你好 丑东西';
                    }else if(newF == 60){
                        this.msg = '您好';
                    }else if(newF > 60 && newF<= 80){
                        this.msg = '你好 漂亮';
                        this.ishot = true;
                    }else if(newF > 80 && newF<= 90){
                        this.msg = '牛蛙牛蛙';
                        this.ishot = true;
                    }else{
                        this.msg = '변백핸: Marry Me！';
                        this.isbao = true;
                        this.iswork = true;
                        this.ishot = true;
                    }
                }
            },
            //计算属性,会偷懒，会缓存
            computed:{
                average(){
                    let num = 0;
                    this.res.forEach(i =>{
                        num += i.score
                    });
                    let length = this.res.length;
                    let result = num/length;
                    return result;
                }
            },
            //不缓存，每次都重新计算
            methods: {
                ave(){
                    let num = 0;
                    this.res.forEach(i =>{
                        num += i.score
                    });
                    let length = this.res.length;
                    let result = num/length;
                    return result;
                }
            }
        })
    </script>
</body>
</html>
